上面的代码中，我们首先获取需要固钉的元素和元素距离页面顶部的距离，然后监听页面的滚动事件。
当页面滚动到超过元素距离页面顶部的位置时，将元素的 class 属性添加 .affix-fixed，使其固定在顶部；

否则，将其移除该
class，回到原始状态。

需要注意的是，当页面滚动时，获取当前页面滚动距离的代码需考虑到多种情况，
如在标准模式下和怪异模式下的浏览器滚动行为不同，
因此最好使用 document.documentElement.scrollTop ||document.body.scrollTop 的方式获取当前滚动距离。

<div class="box"></div>
<div class="box"></div>
<h2>666</h2>
<div id="affix" class="affix">
    这是需要固钉的内容
</div>
<h2>大家好</h2>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<style>
    .box {
        height: 1000px;
        background-color: tomato;
    }

    .affix {
        width: 200px;
        height: 200px;
        background-color: #f5f5f5;
        padding: 20px;
        margin-bottom: 20px;
        position: fixed;
        bottom: 100px;
        left: 0;
        right: 0;
    }

    .affix.affix-fixed {
        position: inherit;


    }
</style>
<script>
    var el = document.querySelector('#affix');
    var elTop = el.offsetTop; // 获取元素离文档顶部的距离

    window.addEventListener('scroll', function () {
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        if (scrollTop >= elTop + 500) {
            el.classList.add('affix-fixed');
        } else {
            el.classList.remove('affix-fixed');
        }
    });

</script>